<template>
	<v-content ref="content" padding-bottom="100">
		<!-- <scroll-view scroll-x class="tab" scroll-into-view="">
			<div id="" class="item" :class="[{ active: current == 0 }]" @click="onTabChange(0)">全部</div>
			<div
				id=""
				class="item"
				:class="[{ active: current == index + 1 }]"
				@click="onTabChange(index + 1)"
				v-for="(item, index) in category"
				:key="index"
			>
				{{ item.name }}
			</div>
		</scroll-view> -->
		<view class="popup">
			<!-- <view id="" class="item" @click="onTabChange(0, 'all')">全部课程</view> -->
			<view id="" class="item" @click="open"
				>{{ childName }}

				<u-icon name="arrow-down" color="#2979ff" size="14"></u-icon>
			</view>

			<u-popup :show="show" mode="bottom" @close="close" closeable>
				<view class="popup-content">
					<div
						class="child"
						v-for="(item, index) in category"
						:class="[{ activeChild: current == index }]"
						@click="onTabChange(index, item.name)"
					>
						{{ item.name }}
					</div>
				</view>
			</u-popup>
		</view>

		<div class="article-list padding">
			<div
				class="item"
				v-for="(item, index) in list"
				:key="index"
				@click="toPage('/pages/learn/details?id=' + item.id)"
			>
				<div class="image-wrap">
					<image class="image" :src="item.coverImg" mode="aspectFill"></image>
					<!-- <div class="tip new">最新</div> -->
				</div>
				<div class="title">{{ item.courseName }}</div>
				<div class="message">{{ item.totalMembers }}人学过</div>
			</div>
			<div class="item"></div>
		</div>
		<v-empty :list="list"></v-empty>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
export default {
	name: "learn-list",
	mixins: [mixins],
	data() {
		return {
			current: 0,
			category: [],
			list: [],
			page: 1,
			total: 10,
			show: false,
			childName: "全部课程",
		}
	},
	computed: {},
	methods: {
		async init() {
			await this.getCategory()
			this.getList()
		},
		async getCategory() {
			const data = await this.$axios.get("/api/study/course/studyCourseClassify/tree", {
				status: 1,
			})
			this.category = data
			this.category.unshift({
				id: "",
				name: "全部课程",
			})
		},
		async getList() {
			const { records, total } = await this.$axios.get("/api/study/course/studyCourse/page", {
				currentPage: this.page,
				size: 10,
				classifyId: this.category[this.current] ? this.category[this.current].id : "",
			})
			this.list = records
			this.total = total
		},

		onScrollBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getList()
			}
		},
		onTabChange(index, name) {
			this.childName = name
			// if (name == "all") {
			// 	this.childName = "课程分类"
			// }
			this.current = index

			this.page = 1
			this.list = []
			this.getList()
			this.close()
		},
		open() {
			this.show = true
		},
		close() {
			this.show = false
		},
	},
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

.popup {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.item {
		position: relative;
		transition: all 0.2s;
		font-size: 26rpx;
		padding: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		color: #2979ff;
		&:last-child {
			margin-right: 0;
		}
		&::before {
			content: "";
			position: absolute;
			bottom: -10rpx;
			left: 0;
			right: 0;
			width: 50%;
			border-radius: 10rpx;
			margin: auto;
			height: 7rpx;
			background: $primary;
			opacity: 0;
			transition: opacity 0.1s;
		}
		&.active {
			transform: scale(1.2);
			&::before {
				opacity: 1;
			}
		}
	}
	.popup-item {
		padding: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
}
.popup-content {
	padding: 100rpx 30rpx 80rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	.child {
		padding: 10rpx 30rpx;
		border: 1px solid #eee;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		border-radius: 50rpx;
		text-align: center;
	}
	.activeChild {
		border: 1px solid #2979ff;
		background: #6198f7;
		color: #fff;
	}
}

.tab {
	overflow-x: auto;
	white-space: nowrap;
	line-height: 70rpx;
	margin: auto;
	margin-bottom: 30rpx;
	width: 690rpx;
	.item {
		display: inline-block;
		transition: all 0.2s;
		font-size: 20rpx;
		position: relative;
		padding: 0 25rpx;
		&::before {
			content: "";
			position: absolute;
			bottom: 7rpx;
			left: 0;
			right: 0;
			width: 50%;
			margin: auto;
			height: 7rpx;
			background: $primary;
			opacity: 0;
			transition: opacity 0.1s;
		}
		&.active {
			transform: scale(1.2);
			&::before {
				opacity: 1;
			}
		}
	}
}
</style>
